<template>
  <view
    class="nav-bar"
    :style="{
      width: '100vw',
      height: titleBarHeight + 'px',
      paddingTop: statusBarHeight + 'px',
      background:
        animation && rgb
          ? `rgba(${255},${255},${255},${opacity})`
          : backgroundColor,
      position: fixed ? 'sticky' : 'relative',
      left: 0,
      top: 0,
      boxShadow: '0px 0px 2px #000',
    }"
  >
    <view class="nav-bat-title-text">{{ title }}</view>
    <view
      class="nav-bar-bgi-box"
      :style="{ opacity: animation ? 1 - opacity : 1 }"
      v-if="backgroundImg"
    >
      <image class="nav-bar-bgi" :src="backgroundImg" mode="widthFix"> </image>
    </view>
  </view>
</template>
<script>
export default {
  name: "CustomNavBar",
  props: {
    backgroundColor: {
      //仅支持16进制hex、rgb
      type: String,
      default: "",
    },
    backgroundImg: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
    animation: {
      type: Boolean,
      default: true,
    },
    fixed: {
      type: Boolean,
      default: true,
    },
    border: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    rgb() {
      console.log(
        this.backgroundColor,
        this.hexToRgb(this.backgroundColor),
        "this.hexToRgb(this.backgroundColor)"
      );
      return this.hexToRgb(this.backgroundColor);
    },
  },
  data() {
    return {
      scrollTop: 0,
      opacity: 0,
      statusBarHeight: 0,
      titleBarHeight: 0,
    };
  },
  created() {
    // const {} = wx.getMenuButtonBoundingClientRect();
    // const {
    // 	menuHeight,
    // 	menuWidth,
    // 	platform
    // } =  ('menuInfo')
    const res = uni.getSystemInfoSync();
    console.log(res);
    const { statusBarHeight, titleBarHeight } = res;
    this.statusBarHeight = statusBarHeight;
    this.titleBarHeight = titleBarHeight;
  },
  methods: {
    clickRight() {
      this.$emit("clickRight");
    },
    clickLeft() {
      this.$emit("clickLeft");
    },
    scroll(e) {
      this.scrollTop = e.target.scrollTop;
      this.opacity = 0 + (this.scrollTop / 20) * 0.05;
    },
    hexToRgb(hex) {
      console.log(this.isHex(hex), "this.isHex(hex)");
      if (this.isHex(hex)) {
        // 移除十六进制颜色中的'#'
        const sanitizedHex = hex.replace("#", "");
        console.log(sanitizedHex, "sanitizedHexs");
        if (sanitizedHex.length == 3) {
          // 解析红、绿、蓝值
          const r = parseInt(sanitizedHex.substring(0, 1), 16);
          const g = parseInt(sanitizedHex.substring(1, 2), 16);
          const b = parseInt(sanitizedHex.substring(2, 3), 16);
          return {
            r,
            g,
            b,
          };
        } else {
          // 解析红、绿、蓝值
          const r = parseInt(sanitizedHex.substring(0, 2), 16);
          const g = parseInt(sanitizedHex.substring(2, 4), 16);
          const b = parseInt(sanitizedHex.substring(4, 6), 16);
          return {
            r,
            g,
            b,
          };
        }
      } else {
        return this.extractRGB(hex);
      }
    },
    isHex(input) {
      const test = /^#[0-9A-Fa-f]{3,6}$/; // 这个正则表达式匹配一个完整的十六进制颜色代码（例如：#FFFFFF）
      return test.test(input);
    },
    extractRGB(colorStr) {
      const regex = /^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/;
      const match = colorStr.match(regex);
      console.log(match, "match");
      if (match) {
        return {
          r: parseInt(match[1], 10),
          g: parseInt(match[2], 10),
          b: parseInt(match[3], 10),
        };
      }
      return null;
    },
  },
};
</script>

<style scoped lang="scss">
.nav-bar {
  .nav-bat-title-text {
  }
}

.nav-bar-bgi-box {
  .nav-bar-bgi {
  }
}
</style>
